<template>
  <div id="agree">
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="ruleForm">

<a-form-model-item label="签订协议方式" prop="agreeSignMethod">
  <a-select v-model="form.agreeSignMethod" placeholder="请选择签订协议方式" >
    <a-select-option value="1">
      线上签订
    </a-select-option>
    <a-select-option value="2">
      线下签订
    </a-select-option>
  </a-select>
</a-form-model-item>

<a-form-model-item label="协议接收人员" v-if="form.agreeSignMethod==1">
  <a-input v-model="form.agreementReceiver" :disabled='flag' :placeholder="form.agreementReceiver"/>
</a-form-model-item>

<a-form-model-item label="《社区戒毒/社区康复协议书》" v-if="form.agreeSignMethod==2" prop="xy">
    <div class="box">
      <span style="margin-right:30px">社区戒毒/社区康复协议书.pdf</span>
      <a-button @click="onView(record)" type="link" style="padding: 0">预览</a-button>
      <a-divider type="vertical" />
      <a-button @click="onDownLoad(record)" type="link" style="padding: 0">下载</a-button>
    </div>
</a-form-model-item>
<a-form-model-item label="《社区戒毒/社区康复保证书》" v-if="form.agreeSignMethod==2" prop="bz">
    <div class="box">
      <span style="margin-right:30px">社区戒毒/社区康复保证书.pdf</span>
      <a-button @click="onView(record)" type="link" style="padding: 0">预览</a-button>
      <a-divider type="vertical" />
      <a-button @click="onDownLoad(record)" type="link" style="padding: 0">下载</a-button>
    </div>
</a-form-model-item>
<a-form-model-item label="《人员守则》" v-if="form.agreeSignMethod==2" prop="ry">
    <div class="box">
      <span style="margin-right:135px">人员守则.pdf</span>
      <a-button @click="onView(record)" type="link" style="padding: 0">预览</a-button>
      <a-divider type="vertical" />
      <a-button @click="onDownLoad(record)" type="link" style="padding: 0">下载</a-button>
    </div>
</a-form-model-item>

<a-form-model-item label="签订《社区戒毒/社区康复协议书》" v-if="form.agreeSignMethod==2" prop="signSjskAgreement">
  <div style="display:flex;align-items: center;">
    <j-upload v-model="form.signSjskAgreement" style="margin-right:10px"></j-upload>
      <a-tooltip placement="rightBottom" :overlayStyle="{ minWidth: `300px`, maxWidth: `400px` }">
        <template slot="title">
          <div>请将《社区戒毒/社区康复协议书》下载签字盖章后上传</div>
        </template>
        <a-icon type="info-circle" />
      </a-tooltip>
  </div>  
  <span >仅支持扩展名为pdf 的文档</span>
</a-form-model-item>
<a-form-model-item label="签订《社区戒毒/社区康复保证书》" v-if="form.agreeSignMethod==2" prop="signSjskGuarantee">
  <div style="display:flex;align-items: center;">
    <j-upload v-model="form.signSjskGuarantee" style="margin-right:10px"></j-upload>
      <a-tooltip placement="rightBottom" :overlayStyle="{ minWidth: `300px`, maxWidth: `400px` }">
        <template slot="title">
          <div>请将《社区戒毒/社区康复保证书》下载签字后上传</div>
        </template>
        <a-icon type="info-circle" />
      </a-tooltip>
  </div>  
  <span >仅支持扩展名为pdf 的文档</span>
</a-form-model-item>
<a-form-model-item label="《人员守则》" v-if="form.agreeSignMethod==2" prop="personnelCode">
  <div style="display:flex;align-items: center;">
    <j-upload v-model="form.personnelCode" style="margin-right:10px"></j-upload>
      <a-tooltip placement="rightBottom" :overlayStyle="{ minWidth: `300px`, maxWidth: `400px` }">
        <template slot="title">
          <div>请将《人员守则》下载签字后上传</div>
        </template>
        <a-icon type="info-circle" />
      </a-tooltip>
  </div>  
  <span >仅支持扩展名为pdf 的文档</span>
</a-form-model-item>


</a-form-model>
  </div>
  
</template>

<script>
export default {
  props:['OpenForm','huancun'],
  methods:{
    onView(record){},
    onDownLoad(record){},
    agreedata(val){
      this.$emit('agreedata',val)
    }
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 6 },
      form: {
        agreementReceiver:this.OpenForm.username
      },
      flag:true,
      rules:{
        agreeSignMethod: [{ required: true, message: '请选择签订协议方式', trigger: 'change' },],
        xy: [{ required: true, message: '请下载文件', trigger: 'change' },],
        bz: [{ required: true, message: '请下载文件', trigger: 'change' },],
        ry: [{ required: true, message: '请下载文件', trigger: 'change' },],
        signSjskAgreement: [{ required: true, message: '请上传文件', trigger: 'change' },],
        signSjskGuarantee: [{ required: true, message: '请上传文件', trigger: 'change' },],
        personnelCode: [{ required: true, message: '请上传文件', trigger: 'change' },],
      }
    };
  },
  watch:{
    form:{
      immediate:true,
      deep:true,
      handler(val){
        // this.form.agreementReceiver = this.OpenForm.name
        this.agreedata(val)
        console.log(this.OpenForm);
      }
    },
    huancun:{
      immediate:true,
      deep:true,
      handler(val){
        console.log(val);
        if(val.sjskReportRegistration){
          this.form = val.sjskReportRegistration
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>

#agree{
  margin-top:50px
}
.box{
  border: 1px solid #e9e9e9;
  padding-left:10px;
  border-radius: 2px;
}
</style>